import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Breadcrumb, Table,Button,Modal,message,Input} from 'antd'
import UpdateOrder from './UpdateOrder.js'
import {connect} from 'react-redux'
import { LoadOrderActionAsync,deleteOrderActionAsync,searchOrderActionAsync,updateOrderActionAsync } from '../../../redux/action/orderAction'
const { Search } = Input
function OrderMgr(props) {
  let ButtonStyle={margin:"15px"}
  useEffect(() => {
    props.LoadOrderActionAsync(params)
  },[])
  const columns = [
    {
      title: '订单编号',
      dataIndex: 'key',
      align:'center',
      ellipsis:true,
    },
    {
      title: '用户名',
      dataIndex: 'user_key',
      align:'center',
      ellipsis:true,
    },
    {
      title: '商品名',
      ellipsis:true,
      dataIndex: 'goods_key',
      align:'center',
    },
    {
      title: '订单描述',
      ellipsis:true,
      dataIndex: 'describe',
      align:'center',
    },
    {
      title: '下单时间',
      ellipsis:true,
      dataIndex: 'start_time',
      align:'center',
    },
    {
      title: '订单状态',
      ellipsis:true,
      dataIndex: 'status',
      align:'center',
      render:(status,row)=>{
        if(status===-1){return (<span style={{color:'red'}}>未处理</span>)}
        else if(status===0){return (<span style={{color:'#f0ee00'}}>处理中</span>)}
        else{return (<span style={{color:'#3399ff'}}>已处理</span>)}
      }
    },
    {
      dataIndex: 'del',
      title:'处理',
      ellipsis:true,
      align:'center',
      render:(del,row)=>{
        return(
          <div>
            <Button type='primary' style={{marginRight:'15px'}} onClick={()=>{
              setShowEditOrderDialog(true)
              setSelectedRowKey([row.key])
            }}>处理</Button>
          </div>
        )
      }
    }
  ]
  const [params,setParams] = useState({page:1,limit:4})
  const [selectedRowKeys,setSelectedRowKeys] = useState([])
  const [selectedRowKey,setSelectedRowKey] = useState([])
  const [showEditOrderDialog,setShowEditOrderDialog] = useState(false)
  const OrderRowSelection={
    onChange:(selectedRowKeys,selectedRows)=>{
      setSelectedRowKeys(selectedRowKeys)
    }
  }
  async function changePage(page,pageSize){

    await setParams({page,pageSize})
    props.LoadOrderActionAsync(params)
  }
  const handleDelete=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    Modal.confirm({
      title:'你确定要删除吗?',
      okText:'删除',
      cancelText:'取消',
      onOk:()=>{
        props.deleteOrderActionAsync(selectedRowKeys)
        props.LoadOrderActionAsync()
        setSelectedRowKeys([])
      }
    })
  }
  const updateOrder=()=>{
    if(selectedRowKeys.length<=0)
    {
      message.warn('你还未选中任何数据')
      return
    }
    if(selectedRowKeys.length===1)
    {
      setShowEditOrderDialog(true)
      setSelectedRowKey(selectedRowKeys)
    }
    else{
      message.error('你不能选择多条数据修改!')
    }
  }
  return (
    <div>
      <Breadcrumb>
        <Breadcrumb.Item>
          <Link to='/home'>首页</Link>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Link to='/home/order_mgr'>订单管理</Link>
        </Breadcrumb.Item>
      </Breadcrumb>
      <hr/>
      <Button type="danger" style={ButtonStyle} onClick={handleDelete}>删除</Button>
      <Button type="primary" style={ButtonStyle} onClick={updateOrder}>处理</Button>
      <Search placeholder='搜索/按编号'
        style={{margin:'15px',width:'300px'}}
        enterButton
        onSearch={(value,e)=>{let v={value};props.searchOrderActionAsync(v)}}
      ></Search>
      <Button type="primary" style={ButtonStyle} onClick={()=>{props.LoadOrderActionAsync(params)}}>显示全部</Button>
      <Table 
        dataSource={props.OrderList} 
        columns={columns} 
        rowSelection={{
          type: 'checkbox',
          ...OrderRowSelection,
        }}
        rowKey='key'
        pagination = {{pageSize:4,onChange:changePage}}
      />
    <UpdateOrder visible={showEditOrderDialog} selectedRowKey={selectedRowKey} close={()=>{
      setShowEditOrderDialog(false)
    }}></UpdateOrder>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    OrderList:state.orderList
	}),
	{LoadOrderActionAsync,deleteOrderActionAsync,searchOrderActionAsync,updateOrderActionAsync}
)(OrderMgr)

